<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/static/admin/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/static/admin/css/main.css"/>
    <script type="text/javascript" src="__PUBLIC__/static/admin/js/libs/modernizr.min.js"></script>
</head>
<body>
{include file="Public/top" /}
<div class="container clearfix">
    {include file="Public/left" /}
    <!--/sidebar-->
    <div class="main-wrap">

        <div class="crumb-wrap">
            <div class="crumb-list"><i class="icon-font"></i><a href="{:url('admin/index/index')}">首页</a><span
                    class="crumb-step">&gt;</span><a class="crumb-name"
                                                     href="{:url('admin/article/lst')}">问卷模板</a><span
                    class="crumb-step">&gt;</span><span>新增问卷模板</span></div>
        </div>
        <div class="result-wrap">
            <div class="result-content">

                <form action="" method="post" id="myform" name="myform" enctype="multipart/form-data">
                    <table id="myTable" class="insert-tab" width="100%">
                        <tbody>
                        <tr>
                            <th width="10%"><i class="require-red">*</i>问卷名称：</th>
                            <td>
                                <input class="common-text required" id="catename" name="catename" size="50" value=""
                                       type="text">
                            </td>
                        </tr>
                        <tr>
                            <th>问卷描述：</th>
                            <td><textarea name="desc" class="common-textarea" id="desc" cols="30" style="width: 50%;"
                                          rows="2"></textarea>
                                <!-- 文件输入元素，隐藏起来 -->
                                <input type="file" id="fileInput" style="display: none;" accept="image/*">
                            </td>
                        </tr>
                        <tr>
                            <th>问题 1</th>
                            <td>
                                <p>问题标题</p><input class="common-text" id="title1" name="title1" size="50" value=""
                                                      type="text"> 分数：<input class="common-text" name="score1"
                                                                               size="5" value=""
                                                                               type="text">
                                <p>问题类型： <input name="type1" value="0" type="radio" checked=""/> 单选题 <input
                                        name="type1" value="1" type="radio"/> 多选题 </p>
                                <p>选项1：<input class="common-text" id="answer11" name="answer11" size="50" value=""
                                                type="text">
                                    <img onclick="uploadImage('answer11')" src="__PUBLIC__/static/admin/images/img.png">
                                    答案：<input type="checkbox" name="correct11">
                                <div><img id="answer11-img" src="" alt="" width="300px" height="300px"
                                          style="display: none"></div>
                                </p>
                                <p>选项2：<input class="common-text" id="answer21" name="answer21" size="50" value=""
                                                type="text">
                                    <img onclick="uploadImage('answer21')" src="__PUBLIC__/static/admin/images/img.png">
                                    答案：<input type="checkbox" name="correct21">
                                <div><img id="answer21-img" src="" alt="" width="300px" height="300px"
                                          style="display: none"></div>
                                </p>
                                <p>选项3：<input class="common-text" id="answer31" name="answer31" size="50" value=""
                                                type="text">
                                    <img onclick="uploadImage('answer31')" src="__PUBLIC__/static/admin/images/img.png">
                                    答案：<input type="checkbox" name="correct31">
                                <div><img id="answer31-img" src="" alt="" width="300px" height="300px"
                                          style="display: none"></div>
                                </p>
                                <p>选项4：<input class="common-text" id="answer41" name="answer41" size="50" value=""
                                                type="text">
                                    <img onclick="uploadImage('answer41')" src="__PUBLIC__/static/admin/images/img.png">
                                    答案：<input type="checkbox" name="correct41">
                                <div><img id="answer41-img" src="" alt="" width="300px" height="300px"
                                          style="display: none"></div>
                                </p>
                                <p>选项5：<input class="common-text" id="answer51" name="answer51" size="50" value=""
                                                type="text">
                                    <img onclick="uploadImage('answer51')" src="__PUBLIC__/static/admin/images/img.png">
                                    答案：<input type="checkbox" name="correct51">
                                <div><img id="answer51-img" src="" alt="" width="300px" height="300px"
                                          style="display: none"></div>
                                </p>
                                <p>选项6：<input class="common-text" id="answer61" name="answer61" size="50" value=""
                                                type="text">
                                    <img onclick="uploadImage('answer61')" src="__PUBLIC__/static/admin/images/img.png">
                                    答案：<input type="checkbox" name="correct61">
                                <div><img id="answer61-img" src="" alt="" width="300px" height="300px"
                                          style="display: none"></div>
                                </p>

                            </td>
                        </tr>
                    </table>
                    <table class="insert-tab" width="100%">
                        <tr>
                            <th width="10%">


                                <a href="#num"><p onclick="insRow()">＋增加一个问题</p></a>
                            </th>
                            <td></td>
                        </tr>
                        <tr>
                            <th></th>
                            <td>
                                <input class="btn btn-primary btn6 mr10" value="提交" type="submit">
                                <input class="btn btn6" onclick="history.go(-1)" value="返回" type="button"><span
                                    id="num" style="display: none">1</span>
                            </td>
                        </tr>
                        </tbody></table>
                    <p style="height: 250px"></p>
                </form>
            </div>
        </div>

    </div>


    <script type="text/javascript">
        function insRow() {

            n = parseFloat(num.innerHTML) + 1;
            num.innerHTML = n;
            var x = document.getElementById('myTable').insertRow(-1)
            var y = x.insertCell(0)
            var z = x.insertCell(1)
            y.innerHTML = '<p style="text-align: right;"> 问题 ' + n + '&nbsp; </p>'
            z.innerHTML = '<p>问题标题</p><input class="common-text" name="title' + n + '" size="50" value="" type="text">  ';
            z.innerHTML += '分数：<input class="common-text" name="score' + n + '" size="5" value="" type="text">  ';
            z.innerHTML += '<p>问题类型： <input name="type' + n + '" value="0" type="radio" checked=""> 单选题 <input name="type' + n + '" value="1" type="radio" /> 多选题 </p>';

            z.innerHTML += '<p>选项1：<input class="common-text" name="answer1' + n + '" size="50" value="" type="text">  <img onclick="uploadImage(\'answer1' + n +'\')" src="__PUBLIC__/static/admin/images/img.png"> 答案：<input type="checkbox" name="correct1' + n +'">';
            z.innerHTML += '<div><img id="answer1' + n +'-img" src="" alt="" width="300px" height="300px"  style="display: none"></div> </p>';

            z.innerHTML += '<p>选项2：<input class="common-text" name="answer2' + n + '" size="50" value="" type="text">  <img onclick="uploadImage(\'answer2' + n +'\')" src="__PUBLIC__/static/admin/images/img.png"> 答案：<input type="checkbox" name="correct2' + n +'">';
            z.innerHTML += '<div><img id="answer2' + n +'-img" src="" alt="" width="300px" height="300px"  style="display: none"></div> </p>';

            z.innerHTML += '<p>选项3：<input class="common-text" name="answer3' + n + '" size="50" value="" type="text">  <img onclick="uploadImage(\'answer3' + n +'\')" src="__PUBLIC__/static/admin/images/img.png"> 答案：<input type="checkbox" name="correct3' + n +'">';
            z.innerHTML += '<div><img id="answer3' + n +'-img" src="" alt="" width="300px" height="300px"  style="display: none"></div> </p>';

            z.innerHTML += '<p>选项4：<input class="common-text" name="answer4' + n + '" size="50" value="" type="text">  <img onclick="uploadImage(\'answer4' + n +'\')" src="__PUBLIC__/static/admin/images/img.png"> 答案：<input type="checkbox" name="correct4' + n +'">';
            z.innerHTML += '<div><img id="answer4' + n +'-img" src="" alt="" width="300px" height="300px"  style="display: none"></div> </p>';

            z.innerHTML += '<p>选项5：<input class="common-text" name="answer5' + n + '" size="50" value="" type="text">  <img onclick="uploadImage(\'answer5' + n +'\')" src="__PUBLIC__/static/admin/images/img.png"> 答案：<input type="checkbox" name="correct5' + n +'">';
            z.innerHTML += '<div><img id="answer5' + n +'-img" src="" alt="" width="300px" height="300px"  style="display: none"></div> </p>';

            z.innerHTML += '<p>选项6：<input class="common-text" name="answer6' + n + '" size="50" value="" type="text">  <img onclick="uploadImage(\'answer6' + n +'\')" src="__PUBLIC__/static/admin/images/img.png"> 答案：<input type="checkbox" name="correct6' + n +'">';
            z.innerHTML += '<div><img id="answer6' + n +'-img" src="" alt="" width="300px" height="300px"  style="display: none"></div> </p>';
        }


        // 图片上传处理函数
        function uploadImage(imgId) {
            // 获取文件输入元素
            var fileInput = document.getElementById('fileInput');
            // 触发文件输入元素的点击事件
            fileInput.click();

            // 当文件输入值改变时（即用户选择了文件），处理文件上传
            fileInput.onchange = function () {
                var file = this.files[0]; // 获取选择的文件
                if (file) {
                    // 在这里实现图片上传逻辑，例如使用 FormData 和 AJAX 发送到服务器
                    console.log('文件已选择：', file);
                    console.log('文件de名：', imgId);
                    // 上传文件的代码应该放在这里,传入对应题目显示的ID
                    uploadImage_second(file, imgId);
                }


                // 获取到图片名称和路径

                // 显示在对应位置 ，即imgId

                // 获取 img 元素

                // var imgElement = document.getElementById(imgId+'-img');
                var imgElement = document.getElementById(imgId + '-img');
                // 设置 img 的 src 属性为 22.jpg
                // imgElement.src = '__PUBLIC__/static/admin/images/' + imgId + '.gif';

                // 更改掉input里面的内容
                // const inputToImgElement = document.getElementById(imgId);
                // imgElement.src = '__PUBLIC__/static/admin/images/' + imgId + '.gif';
                // inputToImgElement.value = '<img src= ' + imgElement.src + '>';
                // 隐藏掉input里面的内容-

                // 清空fileInput的内容
                fileInput.value = '';

            };
        }

        function uploadImage_second(file, imgId) {
            const input = document.getElementById('imageUpload');
            // const file = input.files[0]; test git
            const formData = new FormData();
            formData.append('image', file);

            fetch('__PUBLIC__/index.php/index/article/upload_api', {
                method: 'POST',
                body: formData
            })
                .then(response => response.text()) // 假设API返回的是JSON格式的数据
                .then(data => {

                    // 创建一个Date对象，表示当前日期和时间
                    const now = new Date();

                    // 获取年份，并转为字符串，确保是4位数（例如 "2023"）
                    const year = now.getFullYear().toString().padStart(4, '0');

                    // 获取月份，并转为字符串，确保是2位数（例如 "09" 表示9月）
                    const month = (now.getMonth() + 1).toString().padStart(2, '0');

                    // 获取日期，并转为字符串，确保是2位数（例如 "25" 表示25日）
                    const day = now.getDate().toString().padStart(2, '0');

                    // 将年、月、日拼接成一个8位数的字符串（例如 "20230925"）
                    const formattedDate = year + month + day;

                    console.log(formattedDate); // 输出类似 "20230925" 的字符串


                    data = data.replace(/^\uFEFF/, '');
                    // 假设API返回的数据中有一个'imageUrl'字段，包含了上传图片的URL
                    const imageUrl = '__PUBLIC__/static/uploads/' + formattedDate + '/' + data;
                    console.log(data);
                    console.log(imageUrl);
                    const displayImage = document.getElementById(imgId + '-img');
                    displayImage.src = imageUrl;
                    displayImage.style.display = "block";

                    // 追加input里面的内容
                    const inputToImgElement = document.getElementById(imgId);
                    console.log(inputToImgElement);
                    inputToImgElement.value = getContentBeforeImgTag(inputToImgElement.value) + '<br> <img src=' + imageUrl + ' width=300px height=300px> <br>';

                    // 隐藏掉input里面的内容-
                })
                .catch(error => {
                    console.error('上传图片时出错:', error);
                });
        }

        function getContentBeforeImgTag(str) {
            const imgIndex = str.indexOf('<br');
            if (imgIndex !== -1) {
                return str.substring(0, imgIndex);
            } else {
                return str; // 或者可以返回一个空字符串，取决于你想要如何处理不包含"<img"的情况
            }
        }
    </script>


    <!--/main-->
</div>
</body>
</html>